<script setup>
import myButton from "@/components/myButton.vue";
import typeIn from "@/views/wordStash.vue";
import recordWord from "@/views/recordWord.vue";
import { ref } from "vue";

const isHover = ref(false)

const componentId = ref(0);
const componentMap = {
  0: typeIn,
  1: recordWord
};
</script>

<template>
  <div class="first-page">
    <div class="headerGuide">

      <div class="logAndTitle">
        <img src="@/icons/英语.png" alt="logo" class="logo" draggable="false">
        <h1>CET6 词库管理系统</h1>
        <h6 class="version">Version 2.1.0</h6>
      </div>

      <div class="buttonBox">
        <myButton @click='componentId = 0'
          :class="{ actives: componentId === 0, 'button-hover': isHover === true && componentId != 0 }"
          @mouseover='isHover = true' @mouseleave='isHover = false'>
          词库</myButton>

        <myButton @click='componentId = 1'
          :class="{ actives: componentId === 1, 'button-hover': isHover === true && componentId != 1 }"
          @mouseover='isHover = true' @mouseleave='isHover = false'>背
        </myButton>


      </div>
    </div>


    <div class="mainBox">
      <component :is="componentMap[componentId]"></component>
    </div>

  </div>
</template>

<style scoped lang="scss">
.first-page {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  overflow: hidden;
}

.headerGuide {
  position: relative;
  width: 100%;
  height: 8vh;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: #000000 0px 1px 6px -5px;
}

.logAndTitle {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
}

.logo {
  position: relative;
  height: 8vh;
  left: 3vw;
}

h1 {
  position: relative;
  user-select: none;
  left: 3vw;
  font-size: 2rem;
  color: #FFCC00;
}

.buttonBox {
  position: relative;
  right: 10vw;
  width: 30vw;
  display: flex;
  justify-content: space-around;
}

.button-hover :hover {
  width: 100%;
  height: 100%;
  border-radius: 1vw;
  transform: scale(1.1);
  background: radial-gradient(circle, #ffffff 80%, #FFcc00 100%);
  transition: all 0.2s ease-in-out;
}

.mainBox {
  position: relative;
  width: 99%;
  left: 0.5%;
  // background-color: #b55454;
  height: 90%;
  top: 1%;
}

.actives {
  background-color: #ffd220;
  transition: all 0.2s ease-in-out;
  color: #ffffff;

  font: {
    size: 1.2rem;
    weight: 600;
  }

  text-shadow: #888888 1px 1px 1px;
}

.version {
  user-select: none;
  position: relative;
  top: 1vh;
  right: -3.5vw;
  font-size: 0.8rem;
  color: #fcdbb0;
}
</style>
